const path = require('path');
const TerserPlugin = require("terser-webpack-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

const baseModule = require('./webpack.config.module');
const basePlugins = require('./webpack.config.plugins')

console.log("env", process.env.mode);
const isDev = process.env.mode == 'development'

const baseConfig = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    // filename: isDev ? "js/[name].js" : "js/[name]_[hash].js",
    filename: "js/[name].js",
    chunkFilename: "js/[name].[chunkhash:8].js",
    path: path.resolve(__dirname, "dist"),
    clean: !isDev
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
    mainFiles: ['index', 'main'],
    // 解析后缀 由于 webpack 的解析顺序是从左到右，因此要将使用频率高的文件类型放在左侧
    extensions: ['.vue','.ts', '.tsx', 'jsx', '.js', '.scss', 'json'],
  },
  cache: {
    type: 'filesystem', // 使用文件缓存
  },
  devServer: {
    static: {
      directory: path.join(__dirname, './public'),
    },
    port: 5566,
    // 是否开启代码压缩
    compress: !isDev,
    hot: true,
    open: !isDev
  },
  plugins: basePlugins,
  module: baseModule,
  /** externals
   * 分包，不编译进打包文件
   * 在index.html正常的引入 cdn 资源即可
   * <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
   * 依然可以使用import的方式引入
   * 可以使用插件 html-webpack-externals-plugin  会在index.html自动引入
  */
  // externals: {
  //   'vue': 'Vue',
  //   'vue-router': 'VueRouter'
  // },
  // 抽取第三方模块
  optimization: {
    minimize: !isDev, // 开启代码压缩
    minimizer: [
      // 不再使用 uglifyjs插件
      new TerserPlugin({
        test: /\.js(\?.*)?$/i,
        include: './src',
        parallel: 4,
        terserOptions: {
          parse: {},
          compress: {},
          // Deprecated
          output: {
            // 最紧凑的输出
            beautify: false,
            // 删除所有的注释
            comments: false,
          },
          format: null,
        },
      }),
      // css 样式压缩
      new OptimizeCSSAssetsPlugin()
    ],
    splitChunks: {
      chunks: 'async', // all | async | initial
      minSize: 20 * 1024,
      minRemainingSize: 0,
      minChunks: 1, // 拆分前必须共享模块的最小 chunks 数
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      // enforceSizeThreshold: 50000, // 强制执行拆分的体积阈值和其他限制（minRemainingSize，maxAsyncRequests，maxInitialRequests）将被忽略
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          minSize: 0,
          minChunks: 2,
          test: /node_modules/,
          priority: 1
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
}



module.exports = baseConfig